<script setup>
import { ref } from "vue";
import request from "./utils/request";
import { getPicApi } from "./api/pic";

const picUrl = ref(
  "https://img2.baidu.com/it/u=1825178865,1006684794&fm=253&fmt=auto&app=138&f=JPEG?w=569&h=332"
);
const content = ref("祖国大好山河");
const loading = ref(false);
const getPic = async () => {
  if (!content.value) {
    ElMessage({
      message: "内容不能为空",
      type: "error",
    });
    return;
  }
  loading.value = true;
  ElMessage({
    message: "请求已发送",
    type: "success",
  });
  picUrl.value = await getPicApi(content.value);
  loading.value = false;
  ElMessage({
    message: "生成成功！",
    type: "success",
  });
  console.log(picUrl.value);
};
</script>

<template>
  <div>
    <div class="pic" v-loading="loading">
      <img :src="picUrl" alt="" @click="getPic" />
    </div>
    <div class="bottom">
      <el-button type="primary" @click="getPic">生成图片</el-button>
      <el-input
        v-model="content"
        style="width: 240px"
        placeholder="请输入要生成的图片"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.pic {
  width: 1600px;
  height: 900px;
  margin: 0 auto;
  border: 1px solid #ccc;
  img {
    width: 100%;
    height: 100%;
  }
}
.bottom {
  margin-top: 10px;
  text-align: center;
  .el-input {
    margin-left: 20px;
  }
}
</style>
